變成rule的形狀(4) - ESLint + Prettier + Stylelint 問題集

Stylelint問題

import檔名有的scss時，報錯"Unexpected leading underscore in imported partial name"

partial name意指為了不要讓SASS編譯，而在檔名開頭加上。

這個報錯只要讓SASS認為@import的是純css就能解開，有4種方式
- 副檔名改以.css
- 檔名以protocol開頭
  @import "http://_variable.scss";-
- 檔名是url()
```
@import url("../index.css");
```
- 在結尾加上screen
```
@import "index.scss" screen;
```
  at-import-no-partial-leading-underscore
Unexpected extension ".scss" in @import (scss/at-import-partial-extension)
意指@import的.scss檔不該有副檔名
- 把附檔名去掉
- 修改.stylelintrc.js
```
// 設為一定要有副檔名
at-import-partial-extension:'always'
```
使用tailwind時，報錯"Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown"
```
 rules: {
 "at-rule-no-unknown": null,
 "scss/at-rule-no-unknown": [true, { ignoreAtRules: ["tailwind"] }],
 }
```
Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown
使用map-get時，報錯"Unknown function 'map-get'"

圖中的方式是先使用@use "sass:map";引入SASS map module，然後使用map module下的get()，再透過function-no-unknown定義ignore function
```
"rules": {
   "function-no-unknown":[true, {"ignoreFunctions":["map.get"]}],
 }
```
function-no-unknown
The Next-Generation Sass Module System: Draft 6

Prettier

HTML起始標籤結尾、結尾標籤結尾一直掉到下一行

bracketSameLine設為true、htmlWhitespaceSensitivity設為ignore

ESLint(整合Prettier)

即便fix過了每次打開專案仍瘋狂報錯"Delete ␍ prettier/prettier"
如果電腦作業系統是Windows，直接改全域設定，然後重新pull專案
```
 git config --global core.autocrlf false
```
Why do I keep getting Delete 'cr' [prettier/prettier]?
ESLint跟Prettier瘋狂起衝突
檢查有無安裝eslint-config-prettier。沒有的話先安裝，再設定.eslintrc.js。

eslint-config-prettier會幫你關掉ESLint和Prettier起衝突的rule
```
 // 記得放在extends的最後一個

 extends: [
   'eslint-config-prettier',
 ],
```
Prettier - ESLint Integrations

其他

"can not resolve url."

專案的依賴，或依賴的依賴需要url。從webpack 5開始不會自動幫你安裝，自行安裝即可解決

"Uncaught ReferenceError: Buffer is not defined"

先確認有沒有安裝process、buffer，沒有的話自行安裝，然後到vue.config.js新增webpack設定

 const webpack = require('webpack');

 configureWebpack: {
   plugins: [
     new webpack.ProvidePlugin({
       process: 'process/browser',
       Buffer: ['buffer', 'Buffer'],
     }),
   ],
 },

Buffer is not defined